<template>
  <a-modal
    :width="500"
    :visible="visible"
    title="素材添加到"
    @ok="handleOk"
    @cancel="handleClose"
    centered
  >
    <div class="main_con">
      <div v-if="title" class="">{{ title }}</div>
      <label class="cursor-pointer" v-for="item in dataList">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
          "
        >
          <a-space>
            <cu-icon v-if="item.icon" :type="item.icon"></cu-icon>
            <MenuOutlined
              style="color: #cecece; font-size: 14px; vertical-align: middle"
              v-else
            />
            <span>{{ item.label }}</span>
          </a-space>
          <a-radio
            @change="handleChange"
            :value="item.value"
            :checked="value === item.value"
          ></a-radio>
        </div>
      </label>
    </div>
  </a-modal>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, watch } from "vue";
import { MenuOutlined } from "@ant-design/icons-vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "全部场景",
    },
    materialType: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: [],
    },
  },
  components: {
    MenuOutlined,
  },
  setup(props, context) {
    const state = reactive({
      value: undefined,
    });

    const handleOk = () => {
      context.emit("submit", state.value);
      context.emit("close");
    };

    const handleClose = () => {
      context.emit("close");
    };

    const handleChange = (e) => {
      state.value = e.target.value;
    };

    watch(
      () => props.visible,
      (val) => {
        //
      }
    );

    return {
      ...toRefs(state),
      ...toRefs(props),
      handleOk,
      handleClose,
      handleChange,
    };
  },
});
</script>

<style lang="less" scoped>
.main_con {
  max-height: 300px;
  overflow-y: auto;
}
</style>
